<template>
      <div>
            <el-card>
                  <div slot="header">
                        <!-- 头部 菜单管理 -->
                        <span>菜单管理</span>
                        <el-button style="float: right;" size="mini" type="primary" icon="el-icon-plus" @click="dialogVisible=true;dialogTitle='添加';btnStatus=true">添加顶级菜单</el-button>
                  </div>
                  <!-- 主体部分 -->
                  <div style="width:100%;display:flex;color: #909399;font-weight:bold;border-bottom: 1px solid #ebeef5;padding: 12px 0;">
                        <div style="flex:1;margin-left:30px;">选项</div>
                        <div style="width:100px;">操作</div>
                        <div style="width:100px;">状态</div>
                  </div>
                  <el-tree :data="menusList" v-loading="treeLoading" :default-expand-all="true">
                        <div class="optBox" style="width:100%;position:relative;fontSize:14px" slot-scope="{node,data}">
                              <i :class="data.icon"></i>
                              {{data.text}}
                              <div class="optVisible" style="position:absolute;right:180px;top:0;">
                                    <el-dropdown @command="select">
                                          <span class="el-icon-more" style="transform:rotate(90deg);cursor;pointer"></span>
                                          <!-- 下拉菜单部分 begin -->
                                          <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item :command="{type:'add',id:data.id}"><i class="el-icon-plus"></i> 添加下级菜单</el-dropdown-item>
                                                <el-dropdown-item :command="{type:'edit',id:data.id,row:data}"><i class="el-icon-edit"></i> 编辑</el-dropdown-item>
                                                <el-dropdown-item :command="{type:'delete',id:data.id}" v-show="data.children.length==0"><i class="el-icon-delete"></i> 删除</el-dropdown-item>
                                                <el-dropdown-item :command="{type:'sort',id:data.id,dir:'up',sort:data.sort,pid:data.pid}" v-show="node.previousSibling"><i class="el-icon-arrow-up"></i> 上移</el-dropdown-item>
                                                <el-dropdown-item :command="{type:'sort',id:data.id,dir:'down',sort:data.sort,pid:data.pid}" v-show="node.nextSibling"><i class="el-icon-arrow-down"></i> 下移</el-dropdown-item>
                                                <el-dropdown-item :command="{type:'status',data:data}"></el-dropdown-item>
                                          </el-dropdown-menu>
                                          <!-- 下拉菜单部分 end -->
                                          
                                    </el-dropdown>
                              </div> 
                              <div  style="position:absolute;right:50px;top:0;">
                                    <el-tooltip effect="light" content="展示到主菜单" placement="top">
                                          <el-switch v-model="data.status" :active-value="1" :inactive-value="0" @change="changeStatus(data)" style="margin-left:10px" active-icon-class="switchAct"></el-switch>
                                    </el-tooltip>
                              </div>
                        </div>
                  </el-tree>
            </el-card>

            <!-- 对话框 begin-->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px" @close="resetForm()">
                  <el-form ref="formData" :model="formData" label-width="60px" label-position="left" :rules="rules">
                        <el-form-item label="名称" prop="text">
                              <el-input v-model="formData.text"></el-input>
                        </el-form-item>
                        <el-form-item label="URL" prop="url">
                              <el-input v-model="formData.url"></el-input>
                        </el-form-item>
                        <el-form-item label="ICON" prop="icon">
                              <el-select v-model="formData.icon" placeholder="icon">
                                    <el-option label="无" value=""></el-option>
                                    <el-option v-for="icon in icons" :key="'icon'+icon" :label="icon" :value="icon">
                                          <i :class="icon"></i>
                                          {{icon}}
                                    </el-option>
                              </el-select>
                              <i :class="formData.icon"></i>
                        </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false;">取 消</el-button>
                        <el-button type="primary" @click="menusAdd" :icon="btnIcon" :disabled="buttonDisabled" v-show="btnStatus">确 定</el-button>
                        <el-button type="primary" @click="menusEdit" :icon="btnIcon" :disabled="buttonDisabled" v-show="!btnStatus">确 定</el-button>
                  </span>
            </el-dialog>
            <!-- 对话框 end-->
            
      </div>
</template>
<script>
export default {
  data() {
        var validateURL=(rule, value, callback)=>{
              let reg=/^(\/\w+)+$/
              if(reg.test(value)){
                    callback()
              }else{
                    callback(new Error('url的格式应该为"/xxx/xxx..."'))
              }
        }
    return {
      treeLoading:false,
      btnIcon:'',
      btnStatus:true,
      buttonDisabled:false,
      menusList: [],
      dialogVisible: false,
      dialogTitle: "",
      formData: {
        text: "",
        icon: "",
        url: "",
        pid: 0
      },
      rules: {
            // 对话框中菜单名称的验证
        text: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 2, max: 12, message: "长度在3到12位字符", trigger: "blur" }
        ],
            //   对话框中的url的验证
        url: [
              { required: true, message: "请输入URL", trigger: "blur" },
              { validator:validateURL,trigger: "blur" },
            ]
      },
      icons: [
        "el-icon-info",
        "el-icon-error",
        "el-icon-success",
        "el-icon-warning",
        "el-icon-question",
        "el-icon-back",
        "el-icon-arrow-left",
        "el-icon-arrow-down",
        "el-icon-arrow-right",
        "el-icon-arrow-up",
        "el-icon-caret-left",
        "el-icon-caret-bottom",
        "el-icon-caret-top",
        "el-icon-caret-right",
        "el-icon-d-arrow-left",
        "el-icon-d-arrow-right",
        "el-icon-minus",
        "el-icon-plus",
        "el-icon-remove",
        "el-icon-circle-plus",
        "el-icon-remove-outline",
        "el-icon-circle-plus-outline",
        "el-icon-close",
        "el-icon-check",
        "el-icon-circle-close",
        "el-icon-circle-check",
        "el-icon-circle-close-outline",
        "el-icon-circle-check-outline",
        "el-icon-zoom-out",
        "el-icon-zoom-in",
        "el-icon-d-caret",
        "el-icon-sort",
        "el-icon-sort-down",
        "el-icon-sort-up",
        "el-icon-tickets",
        "el-icon-document",
        "el-icon-goods",
        "el-icon-sold-out",
        "el-icon-news",
        "el-icon-message",
        "el-icon-date",
        "el-icon-printer",
        "el-icon-time",
        "el-icon-bell",
        "el-icon-mobile-phone",
        "el-icon-service",
        "el-icon-view",
        "el-icon-menu",
        "el-icon-more",
        "el-icon-more-outline",
        "el-icon-star-on",
        "el-icon-star-off",
        "el-icon-location",
        "el-icon-location-outline",
        "el-icon-phone",
        "el-icon-phone-outline",
        "el-icon-picture",
        "el-icon-picture-outline",
        "el-icon-delete",
        "el-icon-search",
        "el-icon-edit",
        "el-icon-edit-outline",
        "el-icon-rank",
        "el-icon-refresh",
        "el-icon-share",
        "el-icon-setting",
        "el-icon-upload",
        "el-icon-upload2",
        "el-icon-download",
        "el-icon-loading"
      ]
    };
  },
  methods: {

    //   展示菜单方法
    getMenusList() {
            this.treeLoading=true
            this.$http.get("/menus/list").then(result => {
            if (result.data.error > 0 &&result.data.error==4) {
                  this.$router.push('/users/login')
                  return
            }
            this.treeLoading=false
            this.menusList = this.$tree(result.data.data);
       
            }).catch(error=>{
                  console.log(error)
            })
    },

    //  添加菜单方法
    menusAdd() {
      this.$refs.formData.validate(pass => {
        if (!pass) { return}
            this.btnIcon='el-icon-loading'
            this.buttonDisabled=true   
            this.$http.post("/menus/add", this.$qs.stringify(this.formData)).then(result => {
                  if(result.data.error==0){
                        this.btnIcon=''
                        this.buttonDisabled=false  
                        this.getMenusList()
                        this.dialogVisible=false
                        this.$root.$emit('getMenusList')
                  }
            });
       
      });
    },

      // 编辑菜单方法    
    menusEdit(){
        this.$refs.formData.validate(pass => {
        if (!pass) { return}
            this.btnIcon='el-icon-loading'
            this.buttonDisabled=true   
            this.$http.post("/menus/edit", this.$qs.stringify(this.formData)).then(result => {
                  if(result.data.error==0){
                        this.btnIcon=''
                        this.buttonDisabled=false  
                        this.getMenusList()
                        this.dialogVisible=false
                        this.$root.$emit('getMenusList')
                  }
            });
       
      });  
    },
      //  菜单的增删改查方法  
    select(obj){
          switch(obj.type){
                  case 'add':
                        //调用添加下级菜单方法
                        
                        this.addChildMenus(obj.id);
                  break;
                        case 'delete':
                        //调用删除菜单方法
                        this.deleteMenus(obj.id)
                  break;
                  case 'edit':
                        //调用编辑菜单方法
                        this.editMenus(obj.row)
                        
                  break;
                  case 'sort':
                        this.sort(obj.id,obj.dir,obj.sort,obj.pid)
                  break;
                  case 'status':
                        
                  break;
                default:;
          }
    },
      // 添加下级菜单的方法    
    addChildMenus(id){
            this.btnStatus=true
            this.dialogTitle="添加下级菜单";
            this.dialogVisible=true;
            this.formData.pid=id;
    },
      // 删除菜单的方法    
    deleteMenus(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
            }).then(() => {
                  this.$http.get(`/menus/delete?id=${id}`).then(result=>{
                        if(result.data.error==0){
                              this.getMenusList()
                              this.$root.$emit('getMenusList')
                              this.$message({
                              type: 'success',
                              message: '删除成功!'}) 
                        }else{
                              this.$message({
                              type: 'danger',
                              message: '删除失败!'})
                        }
                  });
                  // this.$root.$emit('getMenusList')
            }).catch(error=>{
                  console.log(error)
            })    
    },
      // 编辑菜单的方法    
    editMenus(row){
            this.dialogTitle="编辑菜单";
            this.dialogVisible=true; 
            this.formData.text=row.text;
            this.formData.url=row.url;
            this.formData.icon=row.icon;
            this.$set(this.formData,'id',row.id)
            this.btnStatus=false;
    },
      //  重置表单的方法   
    resetForm() {
            this.$refs.formData.resetFields();
            this.formData.pid=0
      },
      // 排序的方法
      sort(id,dir,sort,pid){
            this.treeLoading=true
            this.$http.post('/menus/sort',this.$qs.stringify({id,dir,sort,pid})).then((result)=>{
                  this.treeLoading=false
                  this.getMenusList()
                  this.$root.$emit('getMenusList')
            })
      },
      // 改变状态方法
      changeStatus(row){
            this.treeLoading=true
            this.$http.get('/menus/status',{params:{status:row.status,id:row.id}}).then(result=>{
                  this.treeLoading=false
                  this.$root.$emit('getMenusList')
            })
      }
  },
  created() {
    //   调用获取菜单方法
    this.getMenusList();
  }
};
</script>
<style>
.el-tree-node__content {
  height: 50px;
  border-bottom: 1px solid #eaeefb;
  /* margin-bottom: 12px; */
}
.el-card__header{
      font-size: 18px;

}
.el-button.is-circle:hover{
      background: #409EFF;
      color: white;
}
.el-tree-node{
      font-size:14px;
}
</style>


